<template >
  <!--table页面  -->
  <div v-if="tablearr.length>0" class="tables">
    <div class="text">
      <div :class="index==clicktableimg?'border':''" @click="clicktable(index)" v-for="(item,index) in tablearr" :key="index">{{item.tabName}}</div>
    </div>
    <div class="imgs">
      <div v-show="index==clicktableimg" v-for="(item,index) in tablearr" :key="index">
        <img :src="item.tabImg">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['tablearr'],
  data () {
    return {
      //当前激活得table
      clicktableimg: 0
    }
  },
  methods: {
    //点击切换轮播图
    clicktable (sort) {
      this.clicktableimg = sort
    }
  },
}
</script>
<style  lang="scss" scoped>
  // table 栏切换
  .tables {
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 1200px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.1);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    .text {
      height: 66px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      line-height: 66px;
      font-size: 18px;
      border-bottom: 0.1px solid #e4e7ed;
      div {
        width: 100%;
      }
      div:hover {
        cursor: pointer;
        background-color: #f5f7fa;
        color: #4c9efd;
      }
      .border {
        border-bottom: 3px solid #4c9efd;
        margin-bottom: -1px;
        color: #4c9efd;
        background-color: #dfe1e5;
      }
    }
    .imgs {
      padding-top: 15px;
      div {
        height: 420px;
        img {
          width: 100%;
          height: 100%;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
    }
  }
</style>